<template>
  <div class="classroom-container">
    <h3>我的上传</h3>
    <div class="upload-page">
      <div class="upload-form">
        <el-form ref="form" :model="form" label-width="80px"
                 :rules="rules" @submit.native.prevent="submitForm('parameter')">
          <el-row>
            <el-col :span="12">
              <el-form-item label="课堂名称" prop="videoName">
                <el-input v-model="form.videoName" placeholder="请输入视频名称" maxlength="20"></el-input>
              </el-form-item>
              <el-form-item label="菜单" prop="menuId">
                <el-select v-model="form.menuId" placeholder="请选择菜单" style="width: 100%"
                           :disabled="disabledForm">
                  <el-option v-for="type in typeList" :key="type.id" :label="type.menuName"
                             :value="type.id"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="学段" prop="period">
                <el-select v-model="form.period" placeholder="请选择学段" style="width: 100%"
                           :disabled="disabledForm"  @change="handleChangePeriod">
                  <el-option v-for="dict in dict.type.period" :key="dict.value" :label="dict.label"
                             :value="dict.value"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="年级" prop="grade">
                <el-select v-model="form.grade" placeholder="请选择年级" style="width: 100%"
                           :disabled="disabledForm">
                  <el-option v-for="dict in gradeList" :key="dict.value" :label="dict.label"
                             :value="dict.value"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="学科" prop="subject">
                <el-select v-model="form.subject" placeholder="请选择学科" style="width: 100%"
                           :disabled="disabledForm">
                  <el-option v-for="dict in dict.type.subject" :key="dict.value" :label="dict.label"
                             :value="dict.value"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="版本" prop="version">
                <el-select v-model="form.version" placeholder="请选择版本" style="width: 100%"
                           :disabled="disabledForm">
                  <el-option v-for="dict in dict.type.version" :key="dict.value" :label="dict.label"
                             :value="dict.value"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="册次" prop="volume">
                <el-select v-model="form.volume" placeholder="请选择册次" style="width: 100%"
                           :disabled="disabledForm">
                  <el-option v-for="dict in dict.type.volume" :key="dict.value" :label="dict.label"
                             :value="dict.value"></el-option>
                </el-select>
              </el-form-item>
              <!-- <el-form-item label="课堂类型">
                <el-radio-group v-model="form.resource">
                  <el-radio label="视频"></el-radio>
                  <el-radio label="图文"></el-radio>
                </el-radio-group>
              </el-form-item> -->
              <el-form-item label="上传文件" prop="fileList">
                <DtFileUpload
                  ref="fileUploadRef"
                  v-model="form.fileList"
                  :file-type="fileType"
                  :fileLimit="1"
                  :fileSize="200"
                  :disabled="disabledForm"
                />
              </el-form-item>
              <el-form-item label="上传封面" prop="coverFileList">
                <dt-upload v-model="form.coverFileList" :fileSize="1" :list-type="'picture-card'"
                           :isShowTip="false" :disabled="disabledForm" />
                <div class="el-upload__tip" style="line-height: 1.4">
                  首页banner封面建议尺寸: <span class="red-size">480*123</span>，非置顶建议尺寸：<span class="red-size">280*150</span>，只能上传 <b>png/jpg/jpeg</b> 文件，且不超过 <b>1MB</b>
                </div>
              </el-form-item>
              <el-form-item label="视频概述" prop="videoSummary">
                <el-input type="textarea" :rows="8" v-model="form.videoSummary"
                          placeholder="请输入视频概述" maxlength="200" show-word-limit></el-input>
              </el-form-item>
              <el-form-item style="text-align: center;">
                <el-button style="margin-right: 50px" type="primary" native-type="submit">上传</el-button>
                <el-button @click="resets">取消</el-button>
              </el-form-item>
            </el-col>
            <el-col :span="12">
            </el-col>
            <el-col :span="24">
            </el-col>
          </el-row>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
// eslint-disable-next-line import/no-cycle
import { getMenuListByType, insertVideo } from '@/api/classroom/videoReview'

export default {
  name: 'myVideoUpload',
  dicts: ['period', 'grade', 'subject', 'version', 'volume'],
  data() {
    return {
      form: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        fileList: [],
        coverFileList: [],
        resource: '',
        videoSummary: '',
        period: ''
      },
      rules: {
        videoName: [{ required: true, message: '请输入视频名称', trigger: ['blur'] }],
        isAutomatic: [{ required: true, message: '请选择课堂类型', trigger: ['change'] }],
        fileList: [{ required: true, message: '请上传文件', trigger: ['change'] }],
        coverFileList: [{ required: true, message: '请上传封面', trigger: ['change'] }],
        videoSummary: [{ required: true, message: '请输入视频概述', trigger: ['blur'] }],
        period: [{ required: true, message: '请选择学段', trigger: ['change'] }],
        grade: [{ required: true, message: '请选择年级', trigger: ['change'] }],
        subject: [{ required: true, message: '请选择学科', trigger: ['change'] }],
        version: [{ required: true, message: '请选择版本', trigger: ['change'] }],
        volume: [{ required: true, message: '请选择册次', trigger: ['change'] }],
        menuId: [{ required: true, message: '请选择菜单', trigger: ['change'] }]
      },
      imageUrl: '',
      typeList: [],
      disabledForm: false,
      fileType: ['rmvb', 'mp4', 'avi', 'mpeg', 'wmv', 'rm']
    }
  },
  computed: {
    gradeList() {
      if (this.form.period == '1') {
        return this.dict.type.grade
      }
      return this.dict.type.grade.slice(0, 3)
    }
  },
  created() {
    // 初始化，获取菜单
    this.getMenu()
  },
  methods: {
    handleChangePeriod(val) {
      if (+val > 1 && this.form.grade && +this.form.grade > 3) {
        this.form.grade = ''
      }
    },
    resets() {
      this.$refs.form.resetFields()
      this.form = {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        fileList: [],
        coverFileList: [],
        resource: '',
        videoSummary: ''
      }
    },
    getMenu() {
      getMenuListByType().then((res) => {
        this.typeList = res.data
      })
    },
    submitForm(parameter) {
      this.$refs.form.validate((result, message) => {
        if (result) {
          this.form.fileId = this.form.fileList[0].id
          this.form.coverId = this.form.coverFileList[0].fileId
          insertVideo(this.form).then((res) => {
            this.$dtModal.msgSuccess(res.message)
            this.$emit('success')
            this.resets()
          }).catch(() => {
          })
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  .classroom-container {
    background: #f8f9ff;
    .red-size {
      color: red;
    }
    .upload-page {
      // height: 80vh;
      background: #fff;
      padding: 20px;
      .upload-form{
        width: 90%;
        .elememt-upload{
          display: flex;
          align-items: center;
          .el-upload__text {
            font-family: "PingFang SC";
            margin-left: 30px;
            font-weight: 400;
            font-size: 12px;
            line-height: 28px;
            text-align: left;
            color: #808080;
          }
          .avatar-uploader ::v-deep .el-upload {
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
          }
          .avatar-uploader ::v-deep .el-upload:hover {
            border-color: #409EFF;
          }
          .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 178px;
            height: 178px;
            line-height: 178px;
            text-align: center;
          }
          .avatar {
            width: 178px;
            height: 178px;
            display: block;
          }
        }
      }
    }
  }
</style>
